// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

$font-path: '/media/protocol/fonts';
$image-path: '/media/protocol/img';

@import '~@mozilla-protocol/core/protocol/css/includes/lib';

/* -------------------------------------------------------------------------- */
// Common elements and variables

@font-face {
    font-family: FA-Icons-Contact;
    font-style: normal;
    font-weight: normal;
    src:
        url('/media/fonts/icons-contact.woff2') format('woff2'),
        url('/media/fonts/icons-contact.woff') format('woff');
}

/* -------------------------------------------------------------------------- */
// Main page header

.page-head {
    .help a {
        display: block;
    }

    @media #{$mq-lg} {
        @include clearfix;
        padding: $spacing-2xl 0 $spacing-lg;

        .page-title {
            @include bidi(((float, left, right),));
        }

        .help {
            @include bidi((
                (float, right, left),
                (text-align, right, left),
            ));
        }
    }

    @media #{$mq-xl} {
        .help a {
            display: inline;
        }
    }
}

/* -------------------------------------------------------------------------- */
// Tab navigation

.page-content {
    padding-top: $layout-md;
    position: relative;
}

.mzp-has-sidebar {
    @include clearfix;
}

.category-tabs {
    @include bidi(((text-align, left, right),));
    @include text-body-sm;
    display: flex;

    li {
        @include bidi(((margin, 0 $spacing-xs 0 0, 0 0 0 $spacing-xs),));
        display: inline-block;
        position: relative;
        white-space: nowrap;

        &:last-child {
            @include bidi(((margin, 0, margin, 0),));
        }

        a {
            background-color: $color-marketing-gray-20;
            display: block;
            height: 40px;
            line-height: 40px;
            padding: 0 $spacing-sm;
            position: relative;
            text-decoration: none;
            font-weight: 700;
            z-index: 10;
        }

        &.current a {
            color: $color-black;
            cursor: default;
        }
    }

    @media #{$mq-md} {
        @include bidi((
            (left, 0, right, auto),
            (text-align, center, center),
        ));
        position: absolute;
        top: -46px;

        li {
            width: 120px;
            margin: 0;

            a {
                background-color: rgba(255, 255, 255, 0.8);
                padding: 0;

                &:active {
                    background-color: $color-white;
                }
            }

            &.current a {
                background-color: $color-white;
            }
        }
    }

    @media #{$mq-lg} {
        @include text-body-md;

        li {
            width: 218px;
        }
    }

    @media #{$mq-xl} {
        @include bidi(((left, $spacing-lg, right, auto),));
    }
}

/* -------------------------------------------------------------------------- */
// Main content

.entry {
    margin-bottom: $spacing-xl;

    h2 {
        @include text-title-md;
    }

    .locations-wrapper {
        ul {
            margin-bottom: $spacing-xl;
        }
    }

    .adr {
        @include bidi(((padding-left, $spacing-xl, padding-right, 0),));
        margin: 0 0 0.5em;
        position: relative;

        &::before {
            @include bidi(((left, 0, right, auto),));
            color: $color-red-60;
            content: '\e800';
            font: 105% FA-Icons-Contact;
            position: absolute;
            top: 0.125em;
        }
    }
}

/* -------------------------------------------------------------------------- */
// Footers for the tab content, one for spaces and one for community.

.meta-category {
    border-top: 1px solid $color-marketing-gray-30;
    clear: both;
    margin-top: $layout-lg;
    padding: $spacing-lg 0 0;

    li {
        display: block;
    }

    @media #{$mq-lg} {
        @include clearfix;

        ul {
            @include bidi(((float, left, right),));
        }

        li {
            @include bidi(((margin-right, $spacing-sm, margin-left, 0),));
            display: inline;

            &:last-child {
                @include bidi(((margin-right, 0, margin-left, 0),));
            }
        }

        .meta-contact {
            @include bidi(((float, right, left),));
        }
    }
}

.attribution {
    @include text-body-sm;
    margin: $spacing-2xl 0;
}

/* -------------------------------------------------------------------------- */
// Contact links

#contact {
    p {
        max-width: 35em;
    }

    .contact-sections {
        margin: $spacing-2xl 0;
    }

    @media #{$mq-lg} {
        .contact-sections {
            @include clearfix;
            position: relative;
        }

        .contact-section {
            @include bidi((
                (float, left, right),
                (margin-right, $spacing-lg, margin-left, 0),
            ));
            width: calc(33% - #{$spacing-lg});
        }

        @supports (display: grid) {
            .contact-sections {
                display: grid;
                grid-gap: $spacing-lg;
                grid-template-columns: repeat(3, 1fr);
            }

            .contact-section {
                @include bidi(((margin-right, 0, margin-left, 0),));
                margin-right: 0;
                width: auto;
            }
        }
    }
}
